<template>
  <div>
      <el-row>
        <el-col :span="24">
        <el-form ref="form" :model="form" label-width="160px" style="margin-left:10%">
        <fieldset style="width:80%">
          <legend style="margin-left:40px;">
            <h1>基本信息</h1>
          </legend>
          <div style="display:inline-block;width:40%;padding:10px">
            <el-form-item label="头像上传">
              <el-upload class="avatar-uploader"
              :action="getDomain()+'/msmis/api/servedPerson/updateServedPersonPhoto?id='+form.servedPersonID"
              :show-file-list="false"
              :headers="header"
              :on-success="handleAvatarSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="曾用名">
              <el-input v-model="form.nameUsed"></el-input>
            </el-form-item>

            <el-form-item label="性别">
               <el-select v-model="form.sex">
                 <el-option v-for="(v,i) in sexs" :key="i" :value="v.v" :label="v.l"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="身份证号">
              <el-input v-model="form.certifID"></el-input>
            </el-form-item>

            <el-form-item label="人口类型">
              <el-select v-model="form.servedPersonTypeValue" placeholder="请选择服务类型">
                <el-option label="户籍人口" value="01"></el-option>
                <el-option label="流动人口" value="02"></el-option>
                <el-option label="留守人口" value="03"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="出生日期">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.birthDate"></el-date-picker>
            </el-form-item>

            <el-form-item label="民族">
              <el-select v-model="form.ethnicity" placeholder="请选择民族">
                <el-option label="汉族" value="1"></el-option>
                <el-option label="维吾尔族" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="籍贯">
              <el-input v-model="form.nativePlace"></el-input>
            </el-form-item>

             <el-form-item label="政治面貌">
              <el-select  v-model="form.politics" placeholder="">
                <el-option v-for="(v,i) of Politics" :key="i" :value="v.politicsTypeValue" :label="v.politicsTypeName"></el-option>
              </el-select>
            </el-form-item>


            <el-form-item label="婚姻状况">
              <el-select v-model="form.maritalStatus" placeholder="请输入婚姻状况">
                <el-option v-for="(v,i) of Marital" :key="i" :value="v.maritalStatus" :label="v.maritalStatusName"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="学历">
              <el-select v-model="form.education" placeholder="请选择学历">
                <el-option v-for="v of EducationType" :key="v.id" :label="v.educationTypeName" :value="v.education"></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div style="display:inline-block;width:50%">
            <el-form-item label="所属网格">
              <el-cascader :options="NetGridTree" :props="props" v-model="selectOptions" @change="handleChange">
              </el-cascader>
              <!-- <el-select v-model="form.netGridID" placeholder="">
                <el-option v-for="(v,i) in NetGrid" :key="i" :value="v.netGridID" :label="v.netGridName"></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="宗教信仰">
              <!-- 等待类型编码 -->
              <el-select v-model="form.religiousBelief" placeholder="请选择宗教信仰">
                <el-option v-for="v of ReligiousBeliefType" :key="v.id" :label="v.religiousBeliefName" :value="v.religiousBelief"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职业类别">
              <!-- 等待类型编码 -->
              <el-select v-model="form.careerType" placeholder="请选择职业类别">
                <el-option v-for="v of CareerType" :key="v.id" :label="v.careerTypeName" :value="v.careerType"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="职业">
              <el-input v-model="form.career"></el-input>
            </el-form-item>

            <el-form-item label="移动电话">
              <el-input v-model="form.mobileTel"></el-input>
            </el-form-item>

            <el-form-item label="固定电话">
              <el-input v-model="form.fixedTel"></el-input>
            </el-form-item>

            <el-form-item label="是否为特殊人群:">
              <el-radio-group v-model="form.isSpecialPopulation">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- <el-form-item v-if="form.isSpecialPopulation" label="特殊人群类型">
              <el-tooltip content="温馨提示!此下拉菜单可多选" placement="top">
                <el-select v-model="specialValues" multiple placeholder="请选择特殊人群类型">
                  <el-option v-for="item in specialTypes" :key="item.specialPopulationTypeValue" :label="item.specialPopulationTypeName" :value="item.specialPopulationTypeValue">
                  </el-option>
                </el-select>
              </el-tooltip>
            </el-form-item> -->

            <el-form-item label="服务处所:">
              <el-input v-model="form.servedPlace"></el-input>
            </el-form-item>

            <el-form-item label="户籍地:">
               <v-distpicker @selected="getValue" :province="select1.province.Name" :city="select1.city.Name" :area="select1.area.Name"></v-distpicker>
            </el-form-item>

            <el-form-item label="户籍门(楼)详细地址:">
              <el-input v-model="form.domicileAddressDetail"></el-input>
            </el-form-item>

            <el-form-item label="现住地:">
               <v-distpicker @selected="getValue2" :province="select2.province.Name" :city="select2.city.Name" :area="select2.area.Name"></v-distpicker>
            </el-form-item>

            <el-form-item label="现住地门(楼)详细地址:">
              <el-input v-model="form.presentAddressDetail"></el-input>
            </el-form-item>
          </div>

          <el-row>
            <el-col align="center" :span="18">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">更新</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
      </el-form>
          </el-col>
          <el-col :span="24">
              <fieldset style="width:80%;margin-left:10%">
                    <legend style="margin-left:40px;">
                        <h1>户籍信息</h1>
                    </legend>
                   <div v-if="form.servedPersonTypeValue==='01'" style="width:80%;margin-left:5%">
                      <resident-form :Resident="resident"
                      :ConsistforPersonHouseType="ConsistforPersonHouseType"
                      :usepath="usepath" ></resident-form>
                    </div>
                    <div v-if="form.servedPersonTypeValue==='02'" style="width:80%;margin-left:5%">
                      <floating-population-form :floatingPopulation="floatingPopulation"
                      :HouseType="HouseType"
                      :CertificateType="CertificateType"
                      :FolatingReasonType="FolatingReasonType"
                      :UnSettledReasonType="UnSettledReasonType"
                      :usepath="usepath">
                      </floating-population-form>
                    </div>
                    <div v-if="form.servedPersonTypeValue==='03'" style="width:80%;margin-left:5%">
                      <stayed-person-form :StayedPerson="StayedPerson"
                      :ConsistforPersonHouseTypes="ConsistforPersonHouseType"
                      :StayedPersonType="StayedPersonType"
                      :HealthStatusType="HealthStatusType"
                      :usepath="usepath">
                      </stayed-person-form>
                    </div>
                    <div v-if="form.servedPersonTypeValue==='99'" style="width:80%;margin-left:5%">
                        <foreigner-person-form
                        :Foreigner='foreignerForm'>
                        </foreigner-person-form>
                    </div>
            </fieldset>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import addPopulation from "../../components/common/addPopulation";

// 人员类型组件
import FloatingPopulationForm from "../../components/ZzOrgManage/extendFloatingPopulation";
import ResidentForm from "../../components/ZzOrgManage/extendResident";
import StayedPersonForm from "../../components/ZzOrgManage/extendStayedPerson";
import ForeignerPersonForm from "../../components/ZzOrgManage/extendForeignerPerson";

import * as api from "@/api/zonghezhili/duiwujianshe";
import * as api2 from "@/api/netGridManage";
import VDistpicker from 'v-distpicker'
import VDistpicker2 from 'v-distpicker'
import pca from "../../utils/pca"
import { getToken } from '../../utils/auth';

export default {
   watch:{
    "form.servedPersonTypeValue":function(val,val2){
       api.fetchServedMemberInfoById(this.findID).then(res => {
         if(val==='01'){
           this.usepath = res.data.residents.length>0?'update':'save'
         }else if(val==='02'){
          this.usepath = res.data.floatingPopulations.length>0?'update':'save'
         }else if(val==='03'){
           this.usepath === res.data.stayedPersons.length>0?'update':'save'
         }

        // this.DrugAddicts = res.data.drugAddicts.length>0?res.data.drugAddicts[0]:this.DrugAddicts
        // this.AIDSdisease = res.data.aidSdiseases.length>0?res.data.AIDSdisease[0]:this.AIDSdisease
        // this.Emancipist = res.data.emancipists.length>0?res.data.emancipists[0]:this.Emancipist
        // this.communityCorrectioner = res.data.communityCorrectioners.length>0?res.data.communityCorrectioners[0]:this.communityCorrectioner
        // this.SeverePsychotic = res.data.severePsychotics.length>0?res.data.severePsychotics[0]:this.SeverePsychotic
      })
    }
  },
  data() {
    return {
      header:{
        token:getToken()
      },
      props: {
          value: 'netGridID',
          label: 'netGridName',
          children: 'children'
      },
      sexs: [
        {
          v: '0',
          l: "未知的性别"
        },
        {
          v: '1',
          l: "男性"
        },
        {
          v: '2',
          l: "女性"
        },
        {
          v: '9',
          l: "未说明性别"
        }
      ],
      findID:'',
      usepath:'update',
      imageUrl:'',
      form: {
        servedPersonTypeValue: "01"
      },
      floatingPopulation: {
        // 流动人口信息表
        isSettled: 0,
        unSettledReason: null, //待补充
        folatingReasonTypeValue: null, // 流入原因编码
        certificateTypeValue: null, // 办证类型编码
        houseTypeValue: null, //住所类型编码
        registerDate: "",
        dueDate: "",
        unSettledDate: "",
        isFocusPerson: 0
      },
      resident: {
        // 户籍人口信息
        relationshipTypeWithHouseholder: null, // 与户主关系
        consistforPersonHouseTypeValue: null // 人户一致编码
      },
      StayedPerson: {
        // 留守人口信息
        consistforPersonHouseTypeValue: null, // 人户一致编码
        stayedPersonValue: null, // 留守人员编码
        healthStatusTypeValue: null, // 健康状况编码
        familyHeadRelationWithStayedPersonTypeID: null, //家庭主要成员与留守人员关
        familyHeadHealthStatusTypeValue: null,
        personalAnualEarnings: 0,
        familyAnualEarnings: 0
      },

        specialValues: [],
        specialTypes: [], // 特殊人口类型的编码等待服务器上传
        CareerType:[], // 职业类别
        ReligiousBeliefType:[], // 宗教信仰
        EducationType:[], //  学历
        // 常住人口
        ConsistforPersonHouseType:[], //常住户籍人口编码
        // 流动人口所需编码
        UnSettledReasonType:[],// 未落户原因
        FolatingReasonType:[],// 流入原因编码
        CertificateType:[],// 办证类型编码
        HouseType:[], //住所类型编码
        // 留守人口所需编码表
        StayedPersonType:[], // 留守人口类型
        HealthStatusType:[], // 健康状况编码

        // 特殊人群之艾滋病所需编码
        InfectedWayType:[], // 感染途径类型编码
        CaseType:[], // 案件类别
        AIDSAttentionType: [], // 艾滋病关注类型编码
        AIDSReceiveCType: [], // 艾滋病收治情况类型编码

        // 特殊人群之吸毒记录
        controlSituationType: [], // 管控类型编码
        drugReasonType: [], // 吸毒原因类型编码(缺失)
        drugResultType: [], // 吸毒后果编码(缺失)

        // 特殊人群之刑满释放人员
        DangerousEvaulationType: [],// 危险评估类型
        ConnectionType:[], // 衔接情况类型
        PlacementType:[], // 安置情况类型

        // 特殊人群之社区矫正人员
        CorrectingType:[], // 矫正类型编码
        AcceptType:[], // 接收方式
        GroupMemberType:[], // 矫正成员小组编码
        StopCorrectionType:[], //终止矫正类型

        // 特殊人群之精神病所需编码
        EconomicSituationType:[],
        currentDiagnosisType:[],
        dangerousEvaulationLevelType:[],
        treatmentSituationType:[],
        Politics:[],
        Marital:[],
        NetGrid:[],

        select1: {
          province:{
            areaCode:'',
            Name:''
          },
          city:{
            areaCode:'',
            Name:''
          },
          area:{
            areaCode:'',
            Name:''
          }
        },
        select2: {
          province:{
            areaCode:'',
            Name:''
          },
          city:{
            areaCode:'',
            Name:''
          },
          area:{
            areaCode:'',
            Name:''
          }
        },
        NetGridTree: [],
        selectOptions:[]
    };
  },
  components: {
    addPopulation: addPopulation,
    FloatingPopulationForm: FloatingPopulationForm,
    ResidentForm: ResidentForm,
    StayedPersonForm: StayedPersonForm,
    ForeignerPersonForm: ForeignerPersonForm,
    VDistpicker,
    VDistpicker2
  },
  methods: {
    handleChange(value) {
        this.form.netGridID = value[1]
    },
    getDomain(){
      return 'http://' + window.location.host;
    },
    getValue(e){
      this.form.domicileAddress = e.area.code
    },
    getValue2(e){
      this.form.presentAddress = e.area.code
    },
     // 上传头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      if(res){
        this.$notify({
            title: '成功',
            message: '图片修改成功',
            type: 'success'
        })
      }else{
        this.$notify({
            title: '成功',
            message: '图片修改失败',
            type: 'success'
        })
      }
    },
    onSubmit(){
      api.updateServedMemberInfo('00',this.form).then(res=>{
          if(res.code==200){
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success'
            })
          }else{
            this.$notify({
              title: '失败',
              message: '更新失败！',
              type: 'error'
            })
          }
      })
    },
    async initGridTree(netGridID){
      let res = await api2.getAllNetGrid();
      res.data.forEach(v=>{
        if(v.netGridID==netGridID){
          this.selectOptions = [v.fatherNetGridID,v.netGridID];
        }
      })

      this.NetGridTree = res.data
      for (let i = 0; i < this.NetGridTree.length; i++) {
        if (this.NetGridTree[i].fatherNetGridID == -1) {
          this.NetGridTree[i].fatherNetGridName = '开发区管委会'
          this.NetGridTree[i].children = []
        }
      }
      let root = this.NetGridTree.filter(item => {
        if (item.fatherNetGridID == -1) {
          return item
        }
      })
      root.filter(item => {
        this.NetGridTree.filter(x => {
          if (x.fatherNetGridID == item.netGridID) {
            item.children.push(x)
          }
        })
      })
      this.NetGridTree = root;
    }
  },
  mounted() {
    let queryID = this.$route.query.id;
    this.findID = queryID



    api.fetchServedMemberInfoById(queryID).then(res => {
      this.form = res.data.basic[0]
      this.imageUrl = res.data.path[0]
      if(this.form.domicileAddress!=null)
        this.select1 = pca(this.form.domicileAddress)
      if(this.form.presentAddress!=null)
        this.select2 = pca(this.form.presentAddress)
      this.floatingPopulation = res.data.floatingPopulations.length>0?res.data.floatingPopulations[0]:this.floatingPopulation
      this.resident = res.data.residents.length>0?res.data.residents[0]:this.resident
      this.StayedPerson = res.data.stayedPersons.length>0?res.data.stayedPersons[0]:this.StayedPerson

      this.initGridTree(this.form.netGridID);
    })

    api.fetchServedPersonManageTypes().then(res=>{
      this.EducationType = res.data.codeEducationTypeMapper // 学历
      this.CareerType = res.data.codeCareerType // 职业类别
      this.CaseType = res.data.codeCaseType // 案件类型
      this.ReligiousBeliefType=res.data.codeReligiousBeliefType;
      this.specialTypes = res.data.codeSpecialPopulationType //特殊人员类型
      this.ConsistforPersonHouseType = res.data.codeConsistforPersonHouseType //常住户籍人口编码
      this.FolatingReasonType = res.data.codeFloatingReasonType // 流入原因编码
      this.UnSettledReasonType = res.data.codeUnSettledReasonType // 未落户原因
      this.CertificateType = res.data.codeCertificateType // 办证类型编码
      this.HouseType = res.data.codeHouseType // 住所类型编码
      this.StayedPersonType = res.data.codeStayedPersonType // 留守人口类型
      this.HealthStatusType = res.data.codeHealthStatusType // 健康状况编码

      this.InfectedWayType = res.data.codeInfectedWayType // 感染途径编码
      this.AIDSAttentionType = res.data.codeaidsAttentionType // 艾滋病关注类型编码
      this.AIDSReceiveCType = res.data.codeAIDSReceiveCType // 艾滋病收治编码

      this.controlSituationType = res.data.codeControlSituationType // 控制类型编码
      this.drugReasonType = res.data.codeDrugReasonType // 吸毒原因编码
      this.drugResultType = res.data.codeDrugResultType // 吸毒后果编码

      this.DangerousEvaulationType = res.data.codeDangerousEvaulationType // 危险评估类型
      this.ConnectionType = res.data.codeConnectionType // 衔接类型编码
      this.PlacementType = res.data.codePlacementType // 安置情况

      this.CorrectingType = res.data.codeCorrectingType // 矫正编码
      this.AcceptType = res.data.codeAcceptType // 接收方式
      // this.GroupMemberType = res.data.
      this.StopCorrectionType = res.data.codeStopCorrectionType // 终止矫正

      this.EconomicSituationType = res.data.codeFamilyEconomicSituationType
      this.currentDiagnosisType = res.data.codeCurrentDiagnosisType
      this.dangerousEvaulationLevelType = res.data.codeDangerousEvaulationLevelType
      this.treatmentSituationType = res.data.codeTreatmentSituationType

      this.Marital = res.data.codeMaritalStatusType
      this.Politics = res.data.codePoliticsType
      this.NetGrid = res.data.netGrid
    })
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
